<template>
  <div class="bidding-details" :style="{width:a+'px'}">
    <!-- 头部 -->
    <headers></headers>
    <!-- 内容 -->
    <div class="beader">
      <div class="beader-center">
        <div class="beader-center-top">
          <div class="beader-center-top-one">
            <span>主轴预测维护</span>
          </div>
          <div class="beader-center-top-two">
            <div>
              需求编号：<span>{{timedata}}{{ shuju.id }}</span>
            </div>
            <div>
              发布时间：<span>{{ shuju.time }}</span>
            </div>
            <div>
              投标截止时间：
              <span
                >{{ shuju.times }}
                <span v-if="shuju.day != 0">
                （还有<span class="color">{{shuju.day}}</span>天）
                </span>
                <span v-else class="colors">(投标已截止)</span>
              </span>
            </div>
          </div>
          <div class="beader-center-top-three">
            <div v-show="lxfs">
              联系方式：<span>{{shuju.name}}</span><span>{{shuju.phone}}</span>
            </div>
          </div>
          <div class="beader-center-top-four">
            <div class="beader-center-top-four-price">
              <div><img :src="img" alt="" /></div>
              <div>
                预算：<span>￥{{ shuju.price }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="beader-center-center">
          <div class="beader-center-center-beader"><h3>需求详情</h3></div>
          <div class="beader-center-center-top">
            <table class="beader-center-center-table">
              <tr>
                <td>
                  所属类目：<span>{{ shuju.catename }} - {{shuju.catenamepid}}</span>
                </td>
              </tr>
              <tr>
                <td>行业/领域：<span>{{ shuju.catename }}</span></td>
              </tr>
            </table>
          </div>
          <div class="beader-center-center-two">
            <table>
              <tr class="beader-center-center-two-top">
                <td>
                  <span>需求描述</span>
                  <span></span>
                </td>
              </tr>
              <tr class="beader-center-center-two-buttom">
                <td class="beader-center-center-two-buttom-td">
                  <tr>
                    <td v-html="shuju.describe">
                      {{shuju.describe}}
                    </td>
                  </tr>
                  <tr>
                    <td>详情看附件</td>
                  </tr>
                </td>
              </tr>
            </table>
          </div>
          <div class="beader-center-center-three">
            <div class="beader-center-center-three-top">
              <span>附件：</span>
            </div>
            <table class="beader-center-center-three-buttom">
              <tr>
                <td v-if="shuju.file != ''">
                  <a href="javascript:void(0);" @click="innerVisibled = true">{{shuju.file}}</a>
                </td>
                <td v-else>暂无</td>
              </tr>
            </table>
          </div>
          <div class="beader-center-center-buttom">
            <div class="beader-center-center-buttom-center">
              <div class="beader-center-center-buttom-img">
                <span><img :src="img_1" alt="" /></span>
                <span style="color: #e2b965">已有<span>{{shuju.number}}</span>人投标</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="buttom" v-show="show">
      <div class="buttom-center">
        <div class="buttom-center-one">
          <h2>我要投标</h2>
          <button :class="button" :disabled="button == 'buttom-center-onebuttons'" @click="toubiao" style="position: relative">
            <img :src="img_2" alt="" /><span
              style="position: absolute; left: 60px; top: 10px"
              >{{tb}}</span
            >
          </button>
        </div>
      </div>
    </div>
    <div class="buttom-one" v-show="tbjs">
      <div class="buttom-one-center">
        <div v-if="mark == ''"><span>已投标等待雇主选标</span></div>
        <div v-else><span>{{mark}}</span></div>
      </div>
    </div>
    <div class="buttoms" v-show="shows">
      <div class="buttoms-center">
        <div class="buttoms-center-top">
          <div>填写投标信息</div>
          <div>您正在以<span>{{company}}</span>身份投标</div>
        </div>
        <div class="buttoms-center-buttom">
          <table class="buttoms-center-table">
            <tr class="buttoms-center-table-one">
              <td>
                <span>*</span><span>您的报价：</span
                ><span>(如果可以提供更具竞争力的价格，可增加中标几率；)</span>
              </td>
            </tr>
            <tr class="buttoms-center-table-two">
              <td>
                <span>￥</span>
                <input type="text" style="padding-left:10px" v-model="price" placeholder="单位（元）" />
              </td>
            </tr>
            <tr class="buttoms-center-table-six">
              <td>
                <span>其他投标信息</span>
              </td>
            </tr>
            <tr class="buttoms-center-table-seven">
              <td>
                <el-input
                  type="textarea"
                  placeholder="请填写（全文字）"
                  v-model="text"
                  maxlength="250"
                  show-word-limit
                >
                </el-input>
              </td>
            </tr>
            <tr class="buttoms-center-table-nine">
              <td>
                <button @click="qrtb">确认投标</button>
                <button @click="toubiao_false">算了，再想想</button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <el-dialog
        class="outerVisible-dialogs"
        width="50%"
        :visible.sync="innerVisibled"
        append-to-body
      >
      <div class="outerVisible-dialogs-center">
        <span class="span">查看附件</span>
        <div class="text" style="overflow: auto">
          {{shuju.fileTxt}}
        </div>
      </div>
    </el-dialog>
    <!-- 底部 -->
    <footers></footers>
  </div>
</template>

<script>
import footers from "../../components/footers.vue";
import Headers from "../../components/headers.vue";
export default {
  components: { footers, Headers },
  data() {
    return {
      innerVisibled:false,//附件详情
      company:'',//登录用户的公司名称
      mark:'',//投标后的状态
      tb:'',//投标文字
      button:'buttom-center-onebuttons',//投标样式
      price:'',//投标报价
      text:'',//其他投标信息
      timedata:'',//需求编号
      // totalDate: "", //可投标时间
      shuju: [], //数据
      img: require("@/assets/img/qiandai.png"),
      img_1: require("@/assets/img/biao-yonghu.png"),
      img_2: require("@/assets/img/toubiao.png"),
      img_3: require("@/assets/img/tianjia-yiyouanli.png"),
      img_4: require("@/assets/img/tianjia-xinanli.png"),
      img_5: require("@/assets/img/shangchuanfujian.png"),
      img_6: require("@/assets/img/shangchuanfujian_1.png"),
      show: true, //投标显示
      shows: false, //填写投标隐藏
      textarea: "", //投标信息
      lxfs: false, //联系方式
      tbjs: false, //投标结束后--投标的状态
      dialogTableVisible: false,
    };
  },
  methods: {
    qrtb: function () {
      if (/^(([1-9][0-9]{0,14})|([0]{1})|(([0]\\.\\d{1,2}|[1-9][0-9]{0,14}\\.\\d{1,2})))$/.test(this.price)) {
        if (/^[\u4e00-\u9fa5]{2,40}$/.test(this.text)) {
          //添加登录的用户名用于投标人信息
          this.http
          .type('/index',{ type: "sign",phone:JSON.parse(localStorage.getItem("logo"))})
          .then((response) => {
            this.http
            .type('/index',{ type: "tb",pid:this.shuju.id,price:this.price,other:this.text,name:response.data.name,phone:response.data.phone})
            .then((response) => {
              if (response.data.code == 1) {
                this.$message({
                  message: response.data.msg,
                  type: 'success'
                });
                this.lxfs = true;
                this.shows = false;
                this.tbjs = true;
              }else{
                 this.$message.error(response.data.msg);
              }
            })
          })
        }else{
          this.$message({
            showClose: true,
            message: '请填写合法的投标信息再提交哦！',
            type: 'warning'
          });
        }
      }else{
        this.$message({
          showClose: true,
          message: '请填写合法的报价再提交哦！',
          type: 'warning'
        });
      }
    },
    toubiao: function () {
      (this.show = false), (this.shows = true);
    },
    toubiao_false: function () {
      (this.show = true), (this.shows = false);
    },
  },
  created(){
    this.a=document.body.clientWidth-17;
  },
  beforeCreate() {
    //用户公司名称
    this.http
      .type('/index',{ type: "company",phone:JSON.parse(localStorage.getItem("logo")) })
      .then((response) => {
        this.company = response.data.company;
      }),
    //赋值
    this.http
      .type('/index',{ type: "zbdtdetails",id:this.$route.query.id })
      .then((res) => {
        this.shuju = res.data;
        this.shuju.time = this.shuju.time.slice(0, 10);//只要年月日
        this.timedata = this.shuju.time.slice(0,4)+this.shuju.time.slice(5,7)+this.shuju.time.slice(8,10);//需求编号
        //判断用户是否投标过
        var that = this;
        // 可投标最大数的判断 --- 到达投标截止时间
        this.http
        .type('/index',{ type: "tbs",id:this.shuju.id })
        .then((res) => {
          that.tb = res.data.msg;//按钮的文字
          if (res.data.code == 1) {
            that.button = 'buttom-center-onebutton';
          }else if(res.data.code == 2){
            that.button = 'buttom-center-onebuttons';
          }
        }),
        //中标后的状态显示
        this.http
          .type('/index',{ type: "tbstate",id:this.shuju.id,phone:JSON.parse(localStorage.getItem("logo")) })
          .then((res) => {
            if (res.data.code == 1) {
              that.show = false;//投标按钮隐藏
              that.shows = false;//投标框隐藏
              that.lxfs = true;//投标人联系方式显示
              that.tbjs = true;//投标后状态显示
              that.mark = res.data.mark;
            }
        })
    });
  },
};
</script>

<style lang="less" scoped>
.outerVisible-dialogs /deep/ .el-dialog {
  height: 410px;
  width: 670px !important;
}

.outerVisible-dialogs /deep/ .el-dialog__header {
  display: none;
}

.outerVisible-dialogs /deep/ .el-dialog__body {
  padding: 10px 20px 20px 20px;
}
.outerVisible-dialogs-center span{
  font-size: 18px;
  font-weight: bold;
}
.outerVisible-dialogs-center .text{
  margin-top: 10px;
  height: 300px;
  // border: 1px solid red;
}
.outerVisible-dialogs-bottom{
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #cccccc;
  margin-top: 10px;
}
.outerVisible-dialogs-bottom .el-button{
  margin-top: 10px;
}
</style>
<style src="../src/Bidding-details.css"></style>